<template>
  <!-- v-if="info.goods_id" 判断有数据再渲染 防止过滤器报错 -->
    <view v-if="info.goods_id" class="goods-detail-container">
    <!-- 轮播图区域 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
    >
      <swiper-item v-for="(item, index) in info.pics" :key="index">
        <image :src="item.pics_big" @click="previewImg(index)"></image>
      </swiper-item>
    </swiper>
    <!-- 商品信息区域 -->
    <view class="goods-info-box">
      <!-- 商品价格 -->
      <view class="price">￥{{ info.goods_price | formatNum }}</view>

      <!-- 信息主体区域 -->
      <view class="goods-info-body">
        <!-- 商品名称 -->
        <view class="goods-name">{{ info.goods_name }}</view>

        <!-- 收藏 -->
        <view class="favi">
          <uni-icons type="star" size="18" color="gray"></uni-icons>
          <text>收藏</text>
        </view>
      </view>

      <!-- 运费 -->
      <view class="yf">快递：免运费</view>
    </view>
    <!-- rich-text  和 vue中的v-html能力一致 -->
    <rich-text :nodes="info.goods_introduce"></rich-text>
   <!-- 商品导航工具栏组件 -->
<view class="goods_nav">
  
  <!-- fill 控制右侧按钮的样式 -->
  <!-- options 左侧按钮的配置项 -->
  <!-- buttonGroup 右侧按钮的配置项 -->
  <!-- click 左侧按钮的点击事件处理函数 -->
  <!-- buttonClick 右侧按钮的点击事件处理函数 -->
  <uni-goods-nav
  :fill="true"
  :options="leftOptions"
  :buttonGroup="rightOptions"
  @click="leftButtonClick"
  @buttonClick="rightButtonClick"
  />
  
</view>
  </view>
</template>

<script>
// import mapGetters from "vuex"
export default {
 data() {
 return {
  pid: "", // 商品的id
  info: {}, // 商品的详情
  // 左侧按钮组的配置对象
  leftOptions: [
        {
          icon: "shop",
          text: "店铺",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 0,
        },
      ],

      // 右侧按钮组的配置对象
      rightOptions: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ]
 };
 },
 onLoad({goods_id}) {
  this.pid = goods_id || ""
    this.getProductDetail()
 },
 //计算属性 (computed) 会自动追踪依赖（这里是 $store.getters.totalCount）
//当 getter 变化时 → 计算属性更新 → 触发 watch
 computed:{
  totalCount(){
    return this.$store.getters['cart/totalCount']
  }
 },
 //侦听器只能监听当前组件内的数据,不能监听其他模块的数据,所以需要计算属性
 //watch只能监听组件的响应式属性（如data、props、computed），而$store.getters是Vuex的内部引用，不是响应式属性。
 watch:{
  totalCount: {
    immediate: true,//进入页面立即执行
    handler(newVal) {
      this.leftOptions[1].info = newVal
    }
  }
    
  },
 methods: {
  //商品详情
  async getProductDetail() {
      const {message,meta: { status },} = await this.$http.get("/goods/detail", {goods_id: this.pid})
      if (status !== 200) return this.$showMsg()

      // 修改 message对象中的goods_introduce --->将所有的 <img  换成 <img style="display:bock"
      message.goods_introduce = message.goods_introduce.replace(/<img/gi,'<img style="display: block"')

      this.info = message
    },
  preview(index){
    console.log(index);
    //小程序内置API可以实现预览效果
    // console.log(this.info.pics.map(item=>item.pics_big));
    uni.previewImage({
      current:index,//下标
      urls:this.info.pics.map(item=>item.pics_big)//map映射
    })
  },
  //底部
  //左侧店铺和购物车
  leftButtonClick(e){
    console.log(e);
    if(e.index===1){
      uni.switchTab({ url: '../../pages/cart/cart' })//去购车
    }
  },
  //右侧加入购物车和购买
  rightButtonClick(e){
    //1.判断index点击加入购物车
    if(e.index===0){
     // 2. 组织一个商品信息对象
     const item = {
      goods_id: this.info.goods_id, // 商品的Id
      goods_name: this.info.goods_name, // 商品的名称
      goods_price: this.info.goods_price, // 商品的价格
      goods_count: 1, // 商品的数量
      goods_small_logo: this.info.goods_small_logo, // 商品的图片
      goods_state: false, // 商品的勾选状态
    };
    
    // 3. 调用 store 中的 mutations 把商品信息对象存储到购物车中
    this.$store.commit("cart/addToCart", item);
    
    // 可以简单log 测试一下
    console.log('仓库中的数据: ', this.$store.state.cart.cartItems)
  }
}

 },

};
</script>
<style lang="scss" scoped>
//底部样式
.goods-detail-container {
  // 给页面外层的容器底部添加 100rpx 的 padding
  // 防止页面内容被底部商品导航组件遮盖
  padding-bottom: 100rpx;
}

.goods_nav {
  // 将工具栏固定在页面底部
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
//轮播图
swiper {
  height: 750rpx;

  image {
    width: 100%;
    height: 100%;
  }
}
// 商品信息区域的样式
.goods-info-box {
  padding: 20rpx;
  padding-right: 0;

  .price {
    color: #c00000;
    font-size: 36rpx;
    margin: 20rpx 0;
  }

  .goods-info-body {
    display: flex;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
      padding-right: 20rpx;
    }
    // 收藏区域
    .favi {
      width: 240rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1rpx solid #efefef;
      color: gray;
    }
  }

  // 运费
  .yf {
    margin: 20rpx 0;
    font-size: 24rpx;
    color: gray;
  }
}
</style>